<script>
    // 1.什么是vuex?
        // 它是一个状态管理工具，管理组件共享的状态

    // 2.为什么需要使用 vuex?
        // 为了解决组件之间数据传递的问题，传统的传参方式 可维护性差  碰到大型项目GG

    // 3.什么内容要放到 vuex
        // 需要被其他组件共享的属性才会放到vuex
        import users from './users'
        import car from './car'

        import Vue from 'vue'

        import Vuex from 'vuex'
           
        import {fetchproduct} from '../api'

        // 引入持久化的vuex存储插件
        import createPersistedstate from 'vuex-persistedstate'

        Vue.use(Vuex)

        // 一个项目只能实例化一个 store  此为单例对象    
        // rootStore   
        export default new Vuex.Store({
            // strict:true,
            state:{  // 状态 组件共享组件共享的数据都应该放到 state 中
                name:"程潇",
                money:5555,
                nickname:"wa-da-xiwa",
                products:[]

            },
            // 对数据预处理，是vueX中的计算属性
            getters:{
                // 计算属性的函数以 state作为第一个参数
                reverseNickname(state){
                    state.money = 999999
                    return state.nickname.split("").reverse().join("")
                }
            },
            //  用来 变更 state   由一个事件类型和一个函数组成，函数会接收 state 作为第一个参数
            // 直接在 mutations 上发送请求是 不合规范,因为VueX中的mutations必须是同步的 
            mutations:{ 
                INCREASE(state,payload){
                    state.money = state.money+payload
                },
                DECREASE(state,payload){
                    state.money = state.money-payload
                },
                SET_PRODUCT(state,payload){
                    state.products = payload
                }
              
            },
            actions:{
                // actions也能修改 state 不过需要再次提交 mutations
                // actions是可以操作异步的
                // 且和 mutations差不多，都是一个类型对应一个函数
                // actions接收 context对象作为第一个参数第二个payload
                  async GET_PRODUCT(context,payload){
                    // 发送请求
                   let res = await fetchproduct()
                    // 提交mutations来修改state状态
                    context.commit('SET_PRODUCT',res.data)
                }
            },
            // 为了解决项目庞大时，所有代码过于集中会造成代码臃肿
            modules:{
                // 模块化 stote
                users,
                car,          
            },
            // 插件
            plugins:[createPersistedstate({
                // 存储类型 localStorage  sessionStorage
                storage:window.sessionStorage,
                // 存储的 key
                key:"userInfo",
                // 存储的 state
                path:[
                    'users.userInfo'
                ]

            })]

        })
</script>